<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .hide{
            display: none;
        }
        .shadow{
            /*相对于窗口*/
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            background-color: black;
            opacity: 0.4;
            z-index: 999;
        }
        .add-modal{
            position: fixed;
            top: 50%;
            left: 50%;
            width: 400px;
            height: 300px;
            z-index: 1000;
            background-color: white;
            margin-left: -200px;
            margin-top: -200px;
        }
    </style>
</head>
<body>
    <h1>学生列表</h1>
    <div>
        <a href="/add_student/">添加</a>
        <a id="addModal">对话框添加</a>
    </div>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>学生姓名</th>
                <th>所属班级</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            {% for row in student_list %}
                <tr>
                    <td>{{ row.id }}</td>
                    <td>{{ row.name }}</td>
                    <td clsId="{{ row.class_id }}">{{ row.title }}</td>
                    <td>
                        <a href="/edit_student/?nid={{ row.id }}">编辑</a>
                        |
                        <a class="btn-edit">对话框编辑</a>
                        |
                        <a>删除</a>
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>


    <div id="shadow" class="shadow hide"></div>
    <div id="addModal" class="add-modal hide">

        <p>
            姓名：<input id="addName" type="text" name="name" placeholder="姓名" />
        </p>
        <p>
            班级：
            <select id="addClassId" name="classId">
                {% for row in class_list %}
                    <option value="{{ row.id }}">{{ row.title }}</option>
                {% endfor %}
            </select>
        </p>
        <input id="btnAdd" type="button" value="添加" />
        <span id="addError" style="color: red;"></span>
    </div>

    <div id="editModal" class="add-modal hide">
        <h3>编辑学生信息</h3>
        <p>
            姓名：<input id="editName" type="text" name="name" placeholder="姓名" />
            <input type="text" id="editId" style="display: none" />
        </p>
        <p>
            班级：
            <select id="editClassId" name="classId">
                {% for row in class_list %}
                    <option value="{{ row.id }}">{{ row.title }}</option>
                {% endfor %}
            </select>
        </p>
        <input id="btnEdit" type="button" value="更新" />
        <span id="editError" style="color: red;"></span>
    </div>

    <script src="/static/jquery-1.12.4.js"></script>
    <script>
        $(function(){

            $('#addModal').click(function(){
                $('#shadow,#addModal').removeClass('hide');
            });

            $('#btnAdd').click(function(){
                $.ajax({
                    url: '/modal_add_student/',
                    type: 'POST',
                    data: {'name': $('#addName').val(), 'class_id': $('#addClassId').val()},
                    success:function(arg){
                        arg = JSON.parse(arg);
                        if(arg.status){
                            location.reload();
                        }else{
                            $('#addError').text(arg.message);
                        }
                    }
                })
            });

            $('.btn-edit').click(function(){
                $('#shadow,#editModal').removeClass('hide');
                /*
                1. 获取当前标签,$(this)
                 */
                var tds = $(this).parent().prevAll();
                var studentId = $(tds[2]).text();
                var studentName = $(tds[1]).text();
                var classId = $(tds[0]).attr('clsid');
                console.log(studentId,studentName,classId);

                $('#editId').val(studentId);
                $('#editName').val(studentName);
                $('#editClassId').val(classId);



            });

            $('#btnEdit').click(function(){
                $.ajax({
                    url:'/modal_edit_student/',
                    type: 'POST',
                    data: {'nid': $('#editId').val(), 'name':$('#editName').val(),'class_id': $('#editClassId').val()},
                    dataType: 'JSON', //JSON.parse(arg)
                    success:function(arg){
                        if(arg.status){
                            location.reload();
                        }else{
                            $('#editError').text(arg.message);
                        }
                    }
                })
            })
        })
    </script>
</body>
</html>